import React, {Component} from "react";
import {Menu, Icon, Card, Spin} from "antd";
import "../../css/home/home.css";
import {connect} from "react-redux";
import {getAllData, getIdData} from "../../actions/Home/index";

const SubMenu = Menu.SubMenu;

class Home extends Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.props.getAllData();
    }

    menuClick = (item, key, keyPath) => {
        this.props.getIdData(item.id);
    };

    render() {
        return (
            <div className="home_page">
                <div className="home_header">头部</div>
                <div className="home_left">
                    <Menu
                        mode="inline"
                        // defaultSelectedKeys={["1"]}
                        // defaultOpenKeys={["sub1"]}
                    >
                        {this.props.homeIndex.foodData.map((data, i) => (
                            <SubMenu
                                title={
                                    <span>
                    <Icon type="user"/>
                                        {data.name}
                  </span>
                                }
                            >
                                {data.list.map((item, i) => (
                                    <Menu.Item key="1" onClick={() => this.menuClick(item)}>
                                        {item.name}
                                    </Menu.Item>
                                ))}
                            </SubMenu>
                        ))}
                    </Menu>
                </div>
                <div className="home_right">
                    <div className="food_img">
                        {this.props.idAllData.map((item, i) => (
                            <Card
                                style={{width: 180, margin: 10}}
                                bodyStyle={{padding: 0}}
                            >
                                <div className="custom-image">
                                    <img alt="example" width="100%" src={item.albums}/>
                                </div>
                                <div className="custom-card">
                                    <h3>{item.title}</h3>
                                    <p className="line-limit-length">{item.tags}</p>
                                </div>
                            </Card>
                        ))}
                    </div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        homeIndex: state.homeIndex,
        idAllData: state.homeIndex.idFoodData
    };
};

const mapDispatchToProps = dispatch => {
    return {
        getAllData: () => {
            dispatch(getAllData());
        },
        getIdData: id => {
            dispatch(getIdData(id));
        }
    };
};
Home = connect(
    mapStateToProps,
    mapDispatchToProps
)(Home);
export default Home;
